<template>
    <div class="tableBox">
        <div class="elTable" ref="elTableRef">
            <el-table ref="tableRef" tooltip-effect="light" :data="tableData" style="width: 100%" :header-cell-style="{
                background: '#f6f7f7',
                color: '#333333',
            }" :cell-style="handleCellStyle" :height="viewHeight">
                <!--        表格列-->
                <template v-for="(column, index) in columns">
                    <!--          序号列和选择列-->
                    <el-table-column v-if="column.type && (column.type == 'selection' || column.type == 'index')"
                        :width="column.width" :type="column.type" :label="column.label"></el-table-column>
                    <!--          数据列和操作-->
                    <el-table-column v-else :align="column.align" :label="column.label" :width="column.width"
                        show-overflow-tooltip>
                        <template v-if="!column.type" slot-scope="{ row, $index }">
                            <!--              操作列-->
                            <slot v-if="column.slot" :index="$index" :name="column.slot" :row="row" />
                            <!--              数据列-->
                            <span v-else>{{ row[column.prop] }}</span>
                        </template>
                    </el-table-column>
                </template>
                <div slot="empty" class="empty">
                    <!-- <img src="@/assets/img/table/noDataImg.png" alt="" /> -->
                </div>
            </el-table>
        </div>
        <CommonPagination @sizeChange="sizeChange" @currentChange="currentChange" :page="pagination"></CommonPagination>
    </div>
</template>

<script>
export default {
    name: 'CommonTablePage',
    props: {
        // 表头
        columns: {
            type: Array,
            default: () => [],
        },
        // 表格数据
        tableData: {
            type: Array,
            default: () => [],
        },
        //   分页器信息
        pagination: {
            type: Object,
            default: () => ({
                pageNum: 1,
                pageSize: 10,
                total: 0,
            }),
        },
    },
    data() {
        return {
            viewHeight: 0,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.tableRef.doLayout();
            this.viewHeight = this.$refs.elTableRef.offsetHeight
        });
    },
    methods: {
        handleCellStyle({ row, column, rowIndex, columnIndex }) {
            // if ((rowIndex + 1) % 2 == 0) {
            //     return {
            //         background: `rgba(48, 112, 249, 0.05)`,
            //     };
            // }
        },
        /**
         * 更改表格尺寸
         * @param val
         */
         sizeChange(val) {
            this.$parent.setSize(val);
        },
        /**
         *更改页码
         * @param val
         */
         currentChange(val) {
            this.$parent.setPage(val);
        },
        update() {
            console.log('更新');
            this.$nextTick(() => {
                this.$refs.tableRef.doLayout();
            });
        },
    },
};
</script>
<style lang="less" scoped>
.tableBox {
    display: flex;
    flex-direction: column;
    flex: 1;

    .elTable {
        box-sizing: border-box;
        flex: 1 1 auto;
        height: 0;
        overflow: hidden;
    }

    ::v-deep {
        .el-pagination {
            padding-right: 10px;
            display: flex;
            justify-content: flex-end;
        }
    }

}
</style>